<script setup lang="ts">
import { reactive, ref } from "vue";
import { useMenu } from "@/views/nested/company/utils/hook.tsx";
import { transformI18n } from "@/plugins/i18n";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { useRouter } from "vue-router";
const tableData: User[] = [
  {
    id: 3,
    company: "总公司",
    username: "李光伟",
    menuLevel: "一级",
    children: [
      {
        id: 31,
        company: "北京分公司",
        username: "李光伟",
        menuLevel: "二级",
        children: [
          {
            id: 311,
            company: "北京房山分公司",
            username: "李光伟",
            menuLevel: "三级",
            children: [
              {
                id: 3111,
                company: "北京房山长阳分公司",
                username: "李光伟",
                menuLevel: "四级"
              }
            ]
          }
        ]
      }
    ]
  }
];

interface User {
  id: number;
  company: string;
  username: string;
  menuLevel: string;
  hasChildren?: boolean;
  children?: User[];
}

defineOptions({
  username: "company"
});

const formRef = ref();
const tableRef = ref();
const {
  loading,
  columns,
  openDialog,
  onSearch,
  resetForm,
  handleDelete,
  handleSelectionChange
} = useMenu();

const dialogFormVisible = ref(false);
const router = useRouter();

const title = ref(null);
const add = () => {
  title.value = "新增菜单";
  dialogFormVisible.value = true;
  formData.system = null;
  formData.companyCode = null;
  formData.company = null;
  formData.username = null;
  formData.status = "有效";
};
const form = reactive({
  title: "",
  status: "",
  value1: "",
  fourthMenu: ""
});
const formData = reactive({
  system: "Tom",
  companyCode: "112000000",
  company: "总公司",
  username: "总公司",
  status: "有效"
});

const usernameOptions = [
  { label: "总公司", value: "all" },
  { label: "分公司", value: "part" }
];

// const openDialogAdd = () => {
//   router.push({
//     username: "userAdminAdd"
//   });
// };

const update = () => {
  title.value = "修改菜单";
  dialogFormVisible.value = true;
};
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="机构名称：" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入机构名称"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(AddFill)" @click="add()">
          新增菜单
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="机构管理"
      :columns="columns"
      :isExpandAll="false"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
      <template v-slot="{}">
        <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="company" label="机构" align="center" />
          <el-table-column prop="menuLevel" label="机构等级" align="center" />
          <el-table-column
            fixed="right"
            label="操作"
            width="400px"
            align="center"
          >
            <template v-slot="{}">
              <el-button size="small" type="primary" @click="update()"
                >修改</el-button
              >
              <el-button size="small" type="primary">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="dialogFormVisible" :title="title" width="500">
          <el-form :model="formData">
            <el-form-item label="机构代码" label-width="120px">
              <el-input v-model="formData.companyCode" autocomplete="off" />
            </el-form-item>
            <el-form-item label="机构名称" label-width="120px">
              <el-input v-model="formData.company" autocomplete="off" />
            </el-form-item>
            <el-form-item label="功能" label-width="120px">
              <el-input v-model="formData.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上级机构" label-width="120px">
              <el-select
                v-model="formData.username"
                placeholder="请选择上级机构"
              >
                <el-option
                  v-for="item in usernameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否有效" label-width="120px">
              <el-input v-model="formData.status" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                提交
              </el-button>
            </div>
          </template>
        </el-dialog>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
